<template>
    <div>
        <img class="bg-img" :src="props.musicList.al.picUrl" alt="" />
        <div class="detail-page">
            <div class="music-top">
                <div class="music-top-left">
                    <SvgIcon class="icon" iconName="zuojiantou" @click="goBack" />
                    <div class="content">
                        <Vue3Marquee class="name">
                            {{ props.musicList.name }}
                        </Vue3Marquee>
                        <div class="singer">
                            <span v-for="item in props.musicList.ar" :key="item.id">
                                {{ item.name }}/
                            </span>
                            <span> ></span>
                        </div>
                    </div>
                </div>
                <div class="music-top-right">
                    <SvgIcon class="icon" iconName="fenxiang2" />
                </div>
            </div>
            <div class="music-content">
                <img :class="[!isPlaying ? 'needle-img' : 'needle-img-active']" src="@/assets/img/needle-ab.png" alt="">
                <img class="cd-img" src="@/assets/img/cd.png" alt="cd" />
                <img :class="['music-bg-img', isPlaying ? 'music-bg-img-active' : 'music-bg-img-pause']" :src="props.musicList.al.picUrl" alt="music" />
            </div>
            <div class="music-footer">
                <div class="top-icons">
                    <SvgIcon class="icon" iconName="aixin" />
                    <SvgIcon class="icon" iconName="xiazai1" />
                    <SvgIcon class="icon" iconName="yinlechangpian" />
                    <SvgIcon class="icon" iconName="pinglun" />
                    <SvgIcon class="icon" iconName="liebiao1" />
                </div>
                <div class="middle-line"></div>
                <div class="bottom-icons">
                    <svg class="other-icon" aria-hidden="true">
                        <use xlink:href="#icon-i-24gl-repeat2"></use>
                    </svg>
                    <svg class="other-icon" aria-hidden="true">
                        <use xlink:href="#icon-shangyishoushangyige"></use>
                    </svg>
                    <svg class="bficon" aria-hidden="true" @click="playSong">
                        <use :xlink:href="isPlaying ? '#icon-zanting' : '#icon-bofang3'"></use>
                    </svg>
                    <svg class="other-icon" aria-hidden="true">
                        <use xlink:href="#icon-xiayishou"></use>
                    </svg>
                    <svg class="other-icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiao-copy"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Vue3Marquee } from 'vue3-marquee'
import { defineProps, defineOptions } from 'vue'
import { useStore } from 'vuex'
defineOptions({
  components: {
    Vue3Marquee
  }
})

const props = defineProps({
  musicList: Object,
  isPlaying: Boolean,
  playSong: Function
})

const store = useStore()

// 返回就是控制弹出层的关闭
const goBack = () => {
  store.commit('setEjectedState', false)
}

console.log(store.state.isPlaying)
console.log(props.musicList)
</script>

<style lang="scss" scoped>
.detail-page {
    padding: .3rem;
    .music-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .music-top-left {
        display: flex;
        :deep(.icon) {
            width: .6rem;
            height: .6rem;
        }
        .content {
            display: flex;
            flex-direction: column;
            padding-left: .2rem;
        }
        .name {
            font-size: .34rem;
            color: white;
        }
        .singer {
            font-size: .28rem;
            color: #9b9690;
        }
    }
    .music-content {
        position: relative;
        height: 9rem;
        margin-top: .5rem;
        .needle-img, .needle-img-active {
            position: absolute;
            top: 0;
            left: 48%;
            width: 2rem;
            height: 3rem;
            z-index: 999;
            transform-origin: 0 0;
            transition: all 1s linear;
        }
        .needle-img {
            transform: rotate(-10deg);
        }
        .needle-img-active {
            transform: rotate(7deg);
        }
        .cd-img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 5rem;
            height: 5rem;
        }
        .music-bg-img {
            position: absolute;
            left: 28%;
            bottom: 33%;
            width: 3.1rem;
            height: 3.1rem;
            border-radius: 50%;
            animation: rotate_ar 10s linear infinite;
        }
        .music-bg-img-active {
            animation-play-state: running;
        }
        .music-bg-img-pause {
            animation-play-state: paused;
        }
        @keyframes rotate_ar {
            0% {
                transform: rotateZ(0deg);
            }
            100% {
                transform: rotateZ(360deg);
            }
        }
    }
    .music-footer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 2.4rem;
        .top-icons, .bottom-icons {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 .4rem;
        }
        :deep(.icon) {
            width: .6rem;
            height: .6rem;
            cursor: pointer;
        }
        .bficon {
            width: 1rem;
            height: 1rem;
        }
        .other-icon {
            width: .5rem;
            height: .5rem;
        }
    }
}
.bg-img {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    filter: blur(50px);
}
</style>
